// 原生js实现JQuery方法
window.$ = HTMLElement.prototype.$ = function(selector) {
	return (this == window ? document : this).querySelectorAll(selector);
}
window.onload = function() {
	// 鼠标经过手机京东/客户服务显示对应下拉列表
	$("#top_box .app_jd")[0].onmouseover =
		$("#top_box .service")[0].onmouseover = showItems;
	// 鼠标从手机京东/客户服务移出去隐藏对应下拉列表
	$("#top_box .app_jd")[0].onmouseout =
		$("#top_box .service")[0].onmouseout = hideItems;
	// 鼠标经过全部商品分类显示二级菜单鼠标绑定事件
	$("#category")[0].addEventListener("mouseover", showCate, false);
	$("#category")[0].addEventListener("mouseout", hideCate, false);
	// 鼠标经过二级菜单显示三级菜单
	var lis = $("#cate_box>li");
	// 遍历两个li
	for (var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = showSubCate;
		lis[i].onmouseout = hideSubCate;
	}
	//初始化图片调用方法
	pPhoto.init();
}

function showItems() {
	this.$("[id$='_items']")[0].style.display = "block";
	this.$("a").className = "hover";
}

function hideItems() {
	this.$("[id$='_items']")[0].style.display = "none";
	this.$("a")[0].className = "";
}
//鼠标经过全部商品分类显示二级菜单方法
function showCate() {
	this.$("#cate_box")[0].style.display = "block";
}

function hideCate() {
	this.$("#cate_box")[0].style.display = "none";
}
// 鼠标经过二级菜单显示三级菜单方法
function showSubCate() {
	this.$("h3")[0].className = "hover";
	this.$(".sub_cate_box")[0].style.display = "block";
}

function hideSubCate() {
	this.$("h3")[0].className = "";
	this.$(".sub_cate_box")[0].style.display = "none";
}
var pPhoto = {
	// 移动按钮显示小图片
	LIWIDTH: 62, //常量
	moved: 0, //计数器:记录的是向左移图片的个数,按下左按钮-1,按下右按钮+1(初始值)
	count: 0, //计数器:记录的小图片的总数,moved==0,左按钮呈白色禁止使用;
	//count-moved==5,右按钮呈白色禁止使用
	ul: null, //li的父元素
	btnL: null, //代表左按钮
	btnR: null, //代表右按钮
	init: function() {
		// 找到ul
		this.ul = $("#icon_list")[0];
		this.btnL = this.ul.parentNode.$("a")[0]; //获取左按钮
		this.btnR = this.ul.parentNode.$("a")[1]; //获取右按钮
		this.btnL.onclick = this.btnR.onclick = function() { //左按钮与右按钮分别添加点击事件
			pPhoto.move(this); //当前对象进行调用
		}
		this.count = this.ul.$("li").length; //所有小图片的长度(调用li下的所有长度)
	},
	// 点击按钮移动小图片
	move: function(btn) {
		// 当按钮可以点击的时候
		if (!btn.className.endsWith("_disabled")) {
			if (btn == this.btnR) {
				this.ul.style.left = -(this.LIWIDTH * (++this.moved) - 20) + "px";
			} else {
				this.ul.style.left = -(this.LIWIDTH * (--this.moved) - 20) + "px";
			}
			this.btnEnable(); //调用方法
		}
	},
	// 根据count和move判断按钮的状态
	btnEnable: function() {
		//当左侧图片为0,左侧禁止
		if (this.moved == 0) {
			this.btnL.className += "_disabled"; //给左按钮加"_disabled"
		}
		//当右侧图片为0,右侧禁止
		else if (this.count - this.moved == 5) {
			this.btnR.className += "_disabled"; //给右按钮加"_disabled"
		}
		//当按钮为可点击状态
		else {
			this.btnL.className = this.btnL.className.replace("_disabled", "")
			this.btnR.className = this.btnR.className.replace("_disabled", "")

		}
	}
}
